<template>
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count">剩余<strong>{{shengyu}}</strong></span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a @click="$emit('changeFlag',1)" :class="{selected:flag ===1}" href="#/">全部任务</a>
      </li>
      <li>
        <a @click="$emit('changeFlag',2)" href="#/active" :class="{selected:flag ===2}">进行中</a>
      </li>
      <li>
        <a @click="$emit('changeFlag',3)" href="#/completed" :class="{selected:flag ===3}">已完成</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" @click="$emit('delCompleted')">清除已完成</button>
  </footer>
</template>

<script>
export default {
  props:{
    list:Array,
    flag:{
      required: true,
      type:Number
    }
  },
  computed:{
    shengyu(){
      return this.list.filter(item =>item.isDone ===false).length
    }
  }

}
</script>

<style></style>